/**
 * @package     pwebbox
 * @version 	2.0.0
 *
 * @copyright   Copyright (C) 2015 Perfect Web. All rights reserved. http://www.perfect-web.co
 * @license     GNU General Public Licence http://www.gnu.org/licenses/gpl-3.0.html
 */

/*!
 * Bootstrap v2.3.2
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Redeclared styles only for contact form
 */

/* Close button or link */
.pweb-alert .close {
  float: right;
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
  color: #000000;
  text-shadow: 0 1px 0 #ffffff;
  opacity: 0.2;
}

.pweb-alert .close:hover,
.pweb-alert .close:focus {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.4;
}

.pweb-alert button.close {
  padding: 0;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
}

/* Alerts */
.pweb-alert.alert {
  padding: 8px 35px 8px 14px;
  margin-bottom: 20px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}
.pweb-alert.alert,
.pweb-alert.alert h4 {
  color: #c09853;
}
.pweb-alert.alert h4 {
  margin: 0;
}
.pweb-alert.alert .close {
  position: relative;
  top: -2px;
  right: -21px;
  line-height: 20px;
}

.pweb-alert.alert-success {
  color: #468847;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.pweb-alert.alert-success h4 {
  color: #468847;
}
.pweb-alert.alert-danger,
.pweb-alert.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}
.pweb-alert.alert-danger h4,
.pweb-alert.alert-error h4 {
  color: #b94a48;
}
.pweb-alert.alert-info {
  color: #3a87ad;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.pweb-alert.alert-info h4 {
  color: #3a87ad;
}
.pweb-alert.alert-block {
  padding-top: 14px;
  padding-bottom: 14px;
}
.pweb-alert.alert-block > p,
.pweb-alert.alert-block > ul {
  margin-bottom: 0;
}
.pweb-alert.alert-block p + p {
  margin-top: 5px;
}

/* Modal backdrop */
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000000;
}
body > .modal-backdrop {
  z-index: 1040;
}
.pweb-modal.modal > .modal-backdrop,
.pwebcontact-modal.modal > .modal-backdrop {
  z-index: -1;
}
.modal-backdrop.fade {
  opacity: 0;
}
.modal-backdrop,
.modal-backdrop.fade.in {
  opacity: 0.8;
}

/* Modal */
.pweb-modal.modal .modal-body {
  position: relative;
  max-height: 400px;
  padding: 15px;
  overflow-y: auto;
}

.hide {
  display: none;
}

.show {
  display: block;
}

.invisible {
  visibility: hidden;
}

/* Joomla JUI NOTE: Original .modal definition has to be commented in modals.less and responsive-767px-max.less */

/* Joomla JUI NOTE: Original .modal definition has to be commented */

/* >>> JUI >>> */

div.modal.pwebbox-modal {
  position: fixed;
  top: 10%;
  left: 50%;
  z-index: 1050;
  width: 560px;
  margin-left: -280px;
  background-color: #ffffff;
  border: 1px solid #999;
  border-color: rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 6px;
     -moz-border-radius: 6px;
          border-radius: 6px;
  outline: none;
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
     -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
          box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  -webkit-background-clip: padding-box;
     -moz-background-clip: padding-box;
          background-clip: padding-box;
}

div.modal.fade {
  top: -25%;
  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
     -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
       -o-transition: opacity 0.3s linear, top 0.3s ease-out;
          transition: opacity 0.3s linear, top 0.3s ease-out;
}

div.modal.fade.in {
  top: 10%;
}

/* <<< JUI <<< */

/* Joomla JUI NOTE: Original .modal definition has to be commented */

/* >>> JUI >>> */

@media (max-width: 767px) {
  div.modal.pwebbox-modal {
    position: fixed;
    top: 20px;
    right: 20px;
    left: 20px;
    width: auto;
    margin: 0;
  }
  div.modal.fade {
    top: -100px;
  }
  div.modal.fade.in {
    top: 20px;
  }
}

@media (max-width: 480px) {
  div.modal.pwebbox-modal {
    top: 10px;
    right: 10px;
    left: 10px;
  }
}

/* <<< JUI <<< */